/*
 * 新增文章
 * @Author: LuoQianJun
 * @Date: 2018-01-25 15:49:57
 * @Last Modified by: ljb
 * @Last Modified time: 2018-02-05 10:14:05
 */

<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-article-create {
        min-height: 600px;
    }
    
</style>

 <template>

    <div class="v-admin-article-create">

        <Row type="flex" justify="start">
            <Col push="1">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">

               <Form-item label="文章类型" prop="article_type_id">
                    <Select v-model="formValidate.article_type_id" clearable placeholder="请选择类型">
                        <OptionGroup v-for="articleType in articleTypes" :key="articleType.id" :label="articleType.name">
                            <Option v-for="sub_type in articleType.get_sub_tags" :value="sub_type.id + ''" :key="sub_type.id">{{ sub_type.name }}</Option>
                        </OptionGroup>
                    </Select>
                </Form-item>

                <Form-item label="案例图" prop="thumb">
                    <Upload :before-upload="file=>fileChange(file,'thumb','image_info')"
                            :on-remove="file=>fileChange(file,'thumb','image_info')"
                            :multiple="false"
                            accept="image/jpg, image/jpeg, image/png"
                            action="//fake_upload_url/">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传案例图</Button>
                        <div class="license-tip" slot="tip" v-if="image_info.thumb_name">{{ image_info.thumb_name }}</div>
                        <!-- <div class="license-tip" slot="tip" v-else>图片格式为jpg、jpeg或png，大小不超1.5M</div> -->
                    </Upload>
                        
                </Form-item>

                <Form-item label="轮播图" prop="carousel_figure" v-if="isCompanyNews">
                    <Upload :before-upload="file=>fileChange(file,'carousel_figure','image_info')"
                            :on-remove="file=>fileChange(file,'carousel_figure','image_info')"
                            :multiple="false"
                            accept="image/jpg, image/jpeg, image/png"
                            action="//fake_upload_url/">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传轮播图</Button>
                        <div class="license-tip" slot="tip" v-if="image_info.carousel_figure_name">{{ image_info.carousel_figure_name}}</div>
                        <!-- <div class="license-tip" slot="tip" v-else>图片格式为jpg、jpeg或png，大小不超1.5M</div> -->
                    </Upload>
                </Form-item>


                <!-- <Form-item label="导航图" prop="banner">
                    <Upload :before-upload="file=>fileChange(file,'banner','image_info')"
                            :on-remove="file=>fileChange(file,'banner','image_info')"
                            :multiple="false"
                            accept="image/jpg, image/jpeg, image/png"
                            action="//fake_upload_url/">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传导航图</Button>
                        <div class="license-tip" slot="tip" v-if="image_info.banner_name">{{ image_info.banner_name }}</div>
                        <div class="license-tip" slot="tip" v-else>图片格式为jpg、jpeg或png，大小不超1.5M</div>
                    </Upload>
                </Form-item>

                <Form-item label="公司缩略图" prop="company_thumb">
                    <Upload :before-upload="file=>fileChange(file,'company_thumb','image_info')"
                            :on-remove="file=>fileChange(file,'company_thumb','image_info')"
                            :multiple="false"
                            accept="image/jpg, image/jpeg, image/png"
                            action="//fake_upload_url/">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传缩略图</Button>  
                        <div class="license-tip" slot="tip" v-if="image_info.company_thumb_name">{{ image_info.company_thumb_name}}</div>            
                        <div class="license-tip" slot="tip" v-else>图片格式为jpg、jpeg或png，大小不超1.5M</div>
                    </Upload>
                </Form-item> -->

                <Form-item label="文章标题" prop="title">
                   <Input v-model="formValidate.title" placeholder="请输入文章标题"></Input>
                </Form-item>  

                <Form-item label="文章描述" prop="description">
                   <Input v-model="formValidate.description" type="textarea"  placeholder="请输入文章描述"></Input>
                </Form-item>

                <Form-item label="关键字" prop="keywords ">
                    <Input type="text" v-model="formValidate.keywords " placeholder="请输入文章关键字"></Input>
                </Form-item>
                
                <Form-item label="文章内容" prop="content">

                    <vueEditor  ref="editor"
                                :preview-width="950"
                                @change="getArticleContent"></vueEditor>

                    <!-- <vue-editor ref="editor"
                                :preview-width="950"
                                :class-name="class_name"
                                :request-url="request_url"
                                :open-upload-img="true"
                                @change="getArticleContent"></vue-editor> -->
                </Form-item>

                <!-- <Form-item label="英文标题" prop="english_title">
                   <Input v-model="formValidate.english_title" placeholder="请输入英文标题"></Input>
                </Form-item>

                <Form-item label="英文详情" prop="english_description">
                   <Input v-model="formValidate.english_description" type="textarea"  placeholder="请输入英文详情"></Input>
                </Form-item>

                <Form-item label="英文内容" prop="english_content">
                   <Input v-model="formValidate.english_content" type="textarea" placeholder="请输入英文详情"></Input>
                </Form-item> -->

                <Form-item label="优先级" prop="sort">
                    <InputNumber v-model="formValidate.sort" :max="9999" :min="0" placeholder="请输入优先级"></InputNumber>
                </Form-item>
                              
                <Form-item>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </Form-item>

                </Form>
            </Col>
        </Row>

    </div>

 </template>
 
 <script>

 import { validateImage } from 'src/validate';  //引入校验文件

import API_LIST from 'src/API_LIST';

import { mapGetters } from 'vuex';

import vueEditor from 'src/views/component/vue-ueditor';

// import vueEditor from 'src/views/component/vueEditor';
 
export default {

    name: 'article-create',

    props: ['article-types'],

    data: function() {	

        return {
            
            // class_name : 'editor-create',

            // request_url : API_LIST.MULTI_UPLOAD_IMG,

            formValidate : {
                
                article_type_id : '',       //文章类别id

                thumb : '',                 //案例图

                // banner : '',                //导航图

                carousel_figure : '',       //轮播图

                // company_thumb : '',         //公司缩略图

                title : '',                 //文章标题

                description : '',           //文章描述

                content : '',               //文章内容

                sort : 0,                    //优先级

                keywords: '',

            },                  //新增文章的表单

            image_info: {

                thumb_name : '',

                banner_name : '',

                carousel_figure_name : '',

                company_thumb_name : '',

            },

            ruleValidate: {

                article_type_id: [

                    { required: true, message: '请选择文章类型', trigger: 'blur,change' }

                ],

                title: [

                    { required: true, message: '请输入文章标题', trigger: 'blur,change' }

                ],

                description : [

                    { required: true, message: '请输入文章描述', trigger: 'blur,change' }

                ],           

                content :  [

                    { required: true, message: '请输入文章内容', trigger: 'blur,change' }

                ],               
                
                thumb: [

                    { required: true, validator: validateImage, trigger: 'blur,change' }

                ],

                // banner: [

                //     { required: true, validator: validateFile, trigger: 'blur,change' }

                // ],

                carousel_figure : [

                    { required: true, validator: validateImage, trigger: 'blur,change' }

                ],

                // company_thumb : [

                //     { required: true, validator: validateFile, trigger: 'blur,change' }

                // ],

                sort: [

                    { required: true, type: 'number', message: '优先级不能为空', trigger: 'change' }
                    
                ],
            }
                

         }

     },

    components: {

        vueEditor

    },


    computed: {

        isCompanyNews() {

            for (let i in this.articleTypes) {

                if (parseInt(this.articleTypes[i].id) === 1) {

                    let sub_tags = this.articleTypes[i].get_sub_tags;

                    for (let key in sub_tags) {

                        if (String(sub_tags[key].id) === this.formValidate.article_type_id) {

                                return true;
                        }

                    }

                }

            }

            return false;


        }

    },

    methods: {

        /**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
        fileChange(file,param,info){

            switch(param) {

                case 'thumb' :
                        
                    this[info].thumb_name = file.name;

                    break;
                
                case 'banner' : 

                    this[info].banner_name = file.name;

                    break;

                case 'carousel_figure' :

                    this[info].carousel_figure_name = file.name;
                    
                    break;
                
                case 'company_thumb' :

                    this[info].company_thumb_name = file.name;
                    
                    break;

            }

            this.formValidate[param] = file;

            return false;

        },

        /**
         * 富文本内容改变时触发的回调
         * @param  {string} content {文章的内容}
         * @return {undefined}
         */
        getArticleContent(content){

            this.formValidate.content = content;

        },

        /**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
        handleSubmit (name) {
            
            this.$refs[name].validate((valid) => {
                
                if (valid) {

                    this.$emit('post',this.formDataCreate());

                } else {

                    this.$Message.error('存在未填写的条目!');

                }
            })
        },

        /**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined} 
         */
        handleReset (name) {

            this.$refs[name].resetFields();

            this.formValidate.thumb = '';

            // this.formValidate.banner = '';

            this.formValidate.carousel_figure = '';

            // this.formValidate.company_thumb = '';

            this.formValidate.content = '';

            for ( let key in this.image_info ) {

                this.image_info[key] = '';

            }

            this.$refs.editor.clearContent();

        },

        /**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
        formDataCreate(){

            const new_object = {

                article_type_id : this.formValidate.article_type_id,

                thumb : this.formValidate.thumb,                 //案例图

                // banner : this.formValidate.banner,                //导航图

                carousel_figure : this.formValidate.carousel_figure,       //轮播图

                // company_thumb : this.formValidate.company_thumb,         //公司缩略图

                title : this.formValidate.title,                        //文章标题

                description : this.formValidate.description,           //文章描述

                content : this.formValidate.content,               //文章内容
                
                sort : this.formValidate.sort,                    //优先级

                keywords : this.formValidate.keywords,     


            };

            let form_data = new FormData();

            Object.keys(new_object).forEach((key)=>{

                form_data.append( key , new_object[key] );
        
            });

            return form_data;

        }
        
     }
 }
 </script>
 